<template>
  <div class="flex flex_column">

    <!--订单 -->
    <el-dialog
      append-to-body
      title="选择订单"
      :visible.sync="isVisible"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="70%"
      @close="closeMarDialog"
      @open="openorder"
    >
      <div class="dialogDody">
        <div class="btnCon flex flex_between" style="border-bottom:none">
          <!--      搜索框-->
          <div class="search">
            <el-input
              v-model="materalSearch.likeWords"
              prefix-icon="el-icon-search"
              placeholder="输入关键字"
              size="small"
              @keyup.enter.native="MarterdialogShow"
            >
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon pt0" style="padding: 16px">
          <el-table :data="materialList" height="200" border style="width: 100%">
            <el-table-column prop="xieYiShuHao" width="150" label="订单单号" />
            <el-table-column prop="customerBillNo" width="150" label="客户单号" />
            <!-- <el-table-column prop="productCode" width="180" label="订单产品编码" /> -->
            <el-table-column prop="orderTypeName" width="80" label="订单类型" />
            <el-table-column prop="orderCreateTime" width="150" label="创建时间" />
            <el-table-column prop="orderProductName" width="200" show-overflow-tooltip label="产品名称" />
            <el-table-column prop="printingSurface" label="版面" />
            <el-table-column prop="productVersions" label="版本" />
            <el-table-column prop="taoZhuangQuantity" label="套数" />
            <el-table-column prop="expectedDeliveryTime" width="150" label="交货日期" />
            <el-table-column width="105" prop="deliveryBalanceDays" label="剩余日期" />
            <el-table-column prop="customerName" show-overflow-tooltip width="150" label="所属客户" />
            <el-table-column prop="salesmanName" label="业务人员" />
            <el-table-column
              label="操作"
              width="100px"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="medium"
                  style="color: #606266"
                  @click="saveColorManuscript(scope.row)"
                >
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isVisible = false">取 消</el-button>
        <el-button
          v-loading="addLoading"
          :disabled="addLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveColorManuscript"
        >
          确定</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>
<script>
import { defaults } from 'js-cookie'
export default {
  name: 'SelectOrderList',
  props: {
    perVisible: {
      type: Boolean,
      required: false
    },
    queryAction: {
      type: Number,
      required: false
    }
  },
  data() {
    return {
      materialList: [
      ], // 订单列表
      templateSelection: {},
      radio: '',
      materalSearch: {
        queryAction: this.queryAction,
        likeWords: ''

      },
      radioSelect: null,
      currentRow: null,
      marLoading: false,
      addLoading: false
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.perVisible
      },
      set(val) {
        this.$emit('update:perVisible', val)
      }
    }
  },
  created() {
    // this.MarterdialogShow()
  },
  mounted() {},
  methods: {
    getCurrentRow(row) {
      // 获取选中数据   row表示选中这一行的数据，可以从里面提取所需要的值
      this.templateSelection = row
    },
    closeMarDialog() {
      this.isVisible = false
    },
    openorder() {
      this.$nextTick(() => {
        this.radio = ''
      })
      this.materalSearch.likeWords = ''
      this.MarterdialogShow()
    },
    MarterdialogShow() {
      const parmas = this.materalSearch
      this.marLoading = true
      this.$api.product
        .QueryMatchSaleOrderDataList(parmas)
        .then((res) => {
          this.materialList = res
          this.marLoading = false
        })
        .catch(() => {})
    },
    saveColorManuscript(row) {
        this.$emit('current', row)
        this.isVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
